<template>
	<view class="container">
		<view class="top">
			<!-- 地图卡片 -->
			<uni-card margin="15rpx" class="map-card">
				<view class="map-container">
					<map @markertap="mkp" scale="15" :markers="mks" :longitude="longitude" :latitude="latitude" class="map"></map>
				</view>
			</uni-card>
		</view>

		<!-- 门店信息卡片 -->
		<view style="margin-top: 800rpx; padding: 25rpx;">
			<view class="store-title">
				车百事汽车生活馆
			</view>
			<view class="store-detail-row">
				<view class="store-detail-col">
					<view>山阳区人民路与解放路交叉口</view>
				</view>
				<button class="daohang">导航</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

// 选中的商家对象
const info = ref({
	title:'商家名称',
	info:'商家详情'
})
// 选择商家的函数
function mkp(e){
	// console.log(e)
	info.value = mks.value.find(obj => obj.id === e.detail.markerId);
	// 计算距离
	let lat1 = latitude.value // 自己的纬度
	let lon1 = longitude.value; // 自己的经度
	let lat2 = e.detail.latitude; // 商家的纬度
	let lon2 = e.detail.longitude; // 商家的经度
	let distance = calculateDistanceInMeters(lat1, lon1, lat2, lon2);
	jl.value = distance.toFixed(2);
	// console.log(`The distance between Beijing and Shanghai is: ${distance.toFixed(2)} meters`);
}

// 计算距离
const jl = ref(0)


function calculateDistanceInMeters(lat1, lon1, lat2, lon2) {
    const R = 6371000; // 地球半径，单位：米    结果为：米
    //const R = 6371;  // 地球半径，单位：公里   结果为：公里
    const dLat = degToRad(lat2 - lat1);
    const dLon = degToRad(lon2 - lon1);
    const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(degToRad(lat1)) * Math.cos(degToRad(lat2)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return R * c; // 距离，单位：米
}

// 辅助函数：将角度转换为弧度
function degToRad(deg) {
    return deg * (Math.PI / 180);
}

	// 标注
	const mks = ref([{
			id: 999,
			latitude: 34.826128,
			longitude: 113.558902,
			width: 20,
			height: 20,
			iconPath: '/static/dw1.png',
			callout: { // 自定义一直显示的数据，自己的定位信息
				content: "附近门店>",
				color: "#fff",
				bgColor: '#000',
				borderRadius: 10,
				padding: 10,
				display: "ALWAYS",
			}
		},
		{
			id: 1,
			latitude: 34.826622,
			longitude: 113.556722,
			iconPath: '/static/dw1.png',
			width: 20,
			height: 20,
			title: '商家A',
			info: '地址A, 评分4.5' // 自定义信息
		},
		{
			id: 2,
			latitude: 34.824521,
			longitude: 113.557732,
			width: 20,
			height: 20,
			iconPath: '/static/dw1.png',
			title: '商家B',
			info: '地址B, 评分4.5' // 自定义信息
		},
		{
			id: 3,
			latitude: 34.827359,
			longitude: 113.557851,
			width: 20,
			height: 20,
			iconPath: '/static/dw1.png',
			title: '商家C',
			info: '地址C, 评分4.5' // 自定义信息
		},
		{
			id: 4,
			latitude: 34.82753,
			longitude: 113.560137,
			width: 20,
			height: 20,
			iconPath: '/static/dw1.png',
			title: '商家D',
			info: '地址D, 评分4.5' // 自定义信息
		}
	])

	const latitude = ref(30.826128)
	const longitude = ref(110.558902)

	// 定义一个函数，动态的获取当前的坐标信息
	function getLocation() {
		uni.getLocation({
			success(res) {
				console.log('坐标信息', res)
				// 更新最新坐标
				latitude.value = res.latitude;
				longitude.value = res.longitude;
			}
		})
	}
	// 当页面加载后立马执行
	onLoad(() => {
		getLocation()
	})
	// 定义一个函数，选择地理位置
	function chose() {
		// #ifdef H5
		navigator.geolocation.getCurrentPosition(
			position => {
				console.log(position.coords.latitude, position.coords.longitude);
				// 处理获取到的位置信息
			},
			error => {
				console.error(error);
				// 处理错误
			}
		);
		// #endif
		// #ifndef H5
		console.log('选择定位')
		uni.chooseLocation({
			success(res) {
				console.log('选择后的位置', res)
			}
		})
		// #endif
	}

	// 菜单点击事件
	function change(e) {
		// e.detail.index 是点击的菜单项索引
		if (e.detail.index === 0) {
			uni.navigateTo({ url: '/pages/autoRepair/autoRepair' })
		}
		// 你可以根据需要添加其他菜单项的跳转逻辑
	}

	const phone = '18642589456';
	const popupRef = ref(null);

	function contactShop() {
		popupRef.value.open();
	}
	function closePopup() {
		popupRef.value.close();
	}
	function copyPhone() {
		uni.setClipboardData({
			data: phone,
			success: function () {
				uni.showToast({ title: '已复制', icon: 'none' });
				closePopup();
			}
		});
	}

	function callPhone() {
		uni.makePhoneCall({ phoneNumber: phone });
	}

	function goToParticuars() {
		uni.navigateTo({ url: '/pages/autoRepair/particulars/particulars' });
	}
</script>

<style>
.container {
	background: #fff;
	min-height: 100vh;
	padding-bottom: 80rpx;
}
.top{
	margin-top: -15rpx;
	padding-top: 20rpx;
	height: 300rpx;
	background-color: #3083fb;
}
.map-container {
	position: relative;
	height: 1000rpx;
	border-radius: 20rpx;
	overflow: hidden;
}
.map {
	width: 100%;
	height: 100%;
}
.map-btn {
	position: absolute;
	top: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	background: #ff7f2a;
	color: #fff;
	padding: 8rpx 24rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	z-index: 2;
}
.info-section {
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 24rpx;
}
.store-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 12rpx;
}
.store-rating {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}
.star {
	color: #ffb400;
	font-size: 28rpx;
	margin-right: 12rpx;
}
.score {
	color: #666;
	font-size: 24rpx;
	margin-right: 12rpx;
}
.distance {
	color: #1e90ff;
	font-size: 24rpx;
	margin-left: auto;
}
.store-detail {
	color: #888;
	font-size: 24rpx;
	margin-bottom: 12rpx;
}
.store-img {
	width: 180rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-left: 24rpx;
	object-fit: cover;
}
.store-detail-row {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}
.store-detail-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.daohang{
	width: 200rpx;
	background-color: #1e90ff;
	color: white;
	border-radius: 200rpx;
}
</style>
